import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col } from 'antd';
import { FirstHeaderC, TableC, NoDataC, ProductGroupTreeC } from '../../../../../comps';

@Form.create()
class BondArtificialTradesC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      bondID: '', // 债券id
      productId: '', // 组合id
      currentPage: 1, // 当前页码
      numInPage: 10, // 每页条数
      total: 0,
      columns: [],
      dataSource: [],
    };
  }

  componentDidMount() {
    this.setState(
      {
        bondID: this.props.bondID,
      },
      () => {
        this.getTableData();
      },
    );
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    // 判断是否是最新的bondID
    if (nextProps.bondID != this.state.bondID) {
      const {
        form: { resetFields },
      } = this.props;
      resetFields();
      this.setState(
        {
          bondID: nextProps.bondID,
          productId: '',
        },
        () => {
          this.getTableData();
        },
      );
    }
  }

  // 获取日志表格数据
  getTableData = () => {
    const { bondID, productId, currentPage, numInPage } = this.state;
    this.props.dispatch({
      type: 'bondHistoricalDealInfoM/getTableData',
      payload: {
        productId,
        secucode: bondID,
        currentPage,
        numInPage,
      },
      callback: (flag, data) => {
        if (flag == 'success') {
          this.setState({
            columns: data.columns,
            dataSource: data.dataSource,
            currentPage: data.pageInfo.currentPage,
            numInPage: data.pageInfo.numInPage,
            total: data.pageInfo.total,
          });
        }
      },
    });
  };

  // 表格页码排序改变调用
  handleTableChange = (pagination) => {
    const { current, pageSize } = pagination;
    this.setState(
      {
        currentPage: current,
        numInPage: pageSize,
      },
      () => {
        this.getTableData();
      },
    );
  };

  // 日志表格数据展示
  showTable = () => {
    const { currentPage, numInPage, columns, dataSource, total } = this.state;
    // 因为columns来自props，会不停的渲染添加操作列，在此做一下判断
    columns &&
      columns.forEach((value) => {
        if (value.key == 'dealRate') {
          value.align = 'right';
          value.title = '收益率';
          value.render = (text, record) => {
            if (text === null || text === undefined) {
              return '--';
            } else if (isNaN(text)) {
              return text;
            } else {
              return `${Number(text).toFixed(4)}%`;
            }
          };
        }
        if (value.key == 'exerciseDealRate') {
          value.align = 'right';
          value.title = '收益率(行权)';
          value.render = (text, record) => {
            if (text === null || text === undefined) {
              return '--';
            } else if (isNaN(text)) {
              return text;
            } else {
              return `${Number(text).toFixed(4)}%`;
            }
          };
        }
        if (value.key == 'dealValue' || value.key == 'dealFullPrice') {
          value.type = 'money';
          value.width = 130;
          value.toFixed = 4;
        }
        if (value.key == 'parValueTotal') {
          value.type = 'money';
          value.width = 130;
        }
        if (value.key == 'dealAmount') {
          value.width = 100;
        }
      });
    return dataSource && dataSource.length ? (
      <TableC
        columns={columns}
        loading={this.props.loading}
        dataSource={dataSource}
        current={currentPage}
        total={total}
        pageSize={numInPage}
        rowKey='key'
        scroll={{ x: 'max-content' }}
        onChange={this.handleTableChange}
      />
    ) : (
      <NoDataC />
    );
  };

  // 组合下拉框改变的时候
  productGroupChange = (e) => {
    if (!e) {
      this.setState(
        {
          productId: '',
        },
        () => {
          this.getTableData();
        },
      );
    } else {
      this.setState(
        {
          productId: e.key,
        },
        () => {
          this.getTableData();
        },
      );
    }
  };

  render() {
    return (
      <div style={{ marginTop: '20px' }}>
        <FirstHeaderC title={'债券历史交易信息'} />
        {false && (
          <Row>
            <div style={{ padding: '20px', width: '400px' }}>
              <ProductGroupTreeC
                form={this.props.form}
                dataIndex='productId'
                multiple={false}
                initialValue={this.state.init2}
                onChange={(e) => {
                  this.productGroupChange(e);
                }}
                formItemLayout={{
                  labelCol: {
                    span: 4,
                    offset: 2,
                  },
                  wrapperCol: {
                    span: 16,
                    offset: 2,
                  },
                }}
              />
            </div>
          </Row>
        )}
        {this.showTable()}
      </div>
    );
  }
}

export default connect(({ bondHistoricalDealInfoM, loading }) => ({
  bondHistoricalDealInfoM,
  loading: loading.effects['bondHistoricalDealInfoM/getTableData'],
}))(BondArtificialTradesC);
